<template>
	<view>
		<view class="mack" :class="{show: show}" :style="{top: top + 'px',left:left+'%' }">
			<view class="nav-box" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
				@touchend="handleTouchEnd">
				<image src="@/static/ruhuo.png" mode="widthFix" class="ruzhu"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hover-menu",
		data() {
			return {
				top: 450, // 顶端距离 
				left: 90,
				show: false, // 是否显示
				dill: {
					deviationTop: 0, // 偏移量
					deviationLeft: 0, // 偏移量左右
					windowHeight: uni.getSystemInfoSync().windowHeight, // 视图高度 
					isDragging: false, // 用于标记是否处于拖拽状态 
					touchStartTime: 0, // 记录触摸开始的时间  
				},
				status: 1, //第一次点击
			};
		},
		methods: {
			// 拖动开始，记录一下偏移量
			touchstart: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				this.dill.deviationTop = touch.clientY - this.top;
				// this.dill.deviationLeft = touch.clientX - this.left;
				this.dill.deviationLeft = (this.calculatePercentage(touch.clientX, 360) - 0) - this.left
				this.dill.isDragging = false; // 初始化为非拖拽状态  
				this.dill.touchStartTime = Date.now(); // 记录触摸开始时间  
				console.log(this.dill.deviationLeft);
				// console.log(this.deviationTop);
			},

			// 上下拖动时
			touchmove: function(e) {
				if (Date.now() - this.dill.touchStartTime > 100) { // 假设100ms内没有移动则不视为拖拽  
					this.dill.isDragging = true; // 标记为拖拽状态  
				}
				var touch = e.touches[0] || e.changedTouches[0];
				var top = touch.clientY;
				top = top - this.dill.deviationTop;

				if (top < 0) {
					top = 0;
				}
				if (top > this.dill.windowHeight - 40) {
					top = this.dill.windowHeight - 40;
				}
				this.top = top;
				var left = this.calculatePercentage(touch.clientX, 360);
				// let deviationLeft = this.dill.deviationLeft - 0
				// console.log(this.calculatePercentage(this.dill.deviationLeft, 360));

				this.left = left;
				return false;
			},

			calculatePercentage(a, b) {
				// 确保分母不为0  
				if (b === 0) {
					return '分母不能为0';
				}

				// 计算百分比  
				var percentage = (a / b) * 100;

				// 格式化输出，保留两位小数  
				return percentage.toFixed(2);
			},

			// 结束拖拽
			handleTouchEnd(e) {
				// 这里可以添加触摸结束时的处理逻辑  
				// 例如，记录当前位置为新的初始位置  
				if (!this.dill.isDragging) {
					// 如果不是拖拽事件，则视为点击事件  
					this.handleTap(); // 调用点击事件的处理函数  
				} else {
					this.left = 90;
				}

			},

			// 点击事件
			handleTap() {
				if (this.status == 1) {
					this.show = !this.show
					this.status = 2
					this.left = 90;
				} else if (this.status == 2 && this.show) {
					this.onRuzu()
					this.show = !this.show
					this.status = 1
				}

				// console.log(this.show);
				// console.log(this.status);
			},

			// 入驻电店铺
			onRuzu() {
				this.left = 95;
				this.status = 1;
				console.log("跳转了");
				uni.navigateTo({
					url: "/pages/partner/partner"
				})
			}
		}
	}
</script>

<style lang="scss">
	.mack {
		// position: fixed;
		// left: 0;
		position: fixed;
		border: 1px 0 solid;
		z-index: 10;
		width: 100%;
		/* height: 0px; */
		transition: left 0s;
		overflow: hidden;
	}

	/* 展开时 */
	.mack.show {
		left: 110rpx;
	}

	.ruzhu {
		width: 140rpx;
		height: 140rpx;
	}
</style>